/*游戏添加*/
<template>
  <div class="app-container">
    <el-row>
      <el-col :span="4">
        <el-steps :space="200"  direction="vertical" :active="1" finish-status="success" align-center>
          <el-step title="基本信息"></el-step>
          <el-step title="属性参数"></el-step>
          <el-step title="游戏上架"></el-step>
        </el-steps>
      </el-col>

      <el-col :span="20">
        <el-form :model="goods" ref="form" label-width="180px" style="width: 1000px">
          <el-form-item label="游戏名称">
            <el-input v-model="goods.gameName"></el-input>
          </el-form-item>

          <el-form-item label="游戏简介">
            <el-input type="textarea" v-model="goods.gameBriefIntro"></el-input>
          </el-form-item>

          <el-form-item label="游戏介绍">
            <quill-editor ref="text" v-model="goods.gameIntro" :options="editorOption" ></quill-editor>
          </el-form-item>

          <el-form-item label="游戏图片集(第一张作为默认图片)">
            <el-upload
              :action="BASE_API + '/thirdparty/upload'"
              list-type="picture-card"
              :on-preview="viewPicture"
              :on-remove="handleRemove"
              :on-success="uploadSuccess">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-form-item>

          <el-form-item label="价格">
            <el-input-number v-model="goods.price" :precision="2" :step="1" :min="0"></el-input-number>
          </el-form-item>

          <el-form-item label="发布时间">
            <el-date-picker v-model="goods.releaseTime" type="date" placeholder="选择日期"></el-date-picker>
          </el-form-item>

          <el-form-item label="游戏类型">
            <el-select v-model="goods.typeIdList" multiple placeholder="请选择游戏类型">
              <el-option v-for="item in typeList" :label="item.typeName" :value="item.typeId" :key="item.typeId">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="属性分组">
            <el-select v-model="goods.attrGroupIdList" multiple placeholder="请选择游戏类型">
              <el-option v-for="item in attrGroupList" :label="item.attrGroupName" :value="item.attrGroupId" :key="item.attrGroupId">
              </el-option>
            </el-select>
          </el-form-item>

          <el-button type="primary" @click="addGameNext" style="float: right">下一步</el-button>
        </el-form>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor"
import global from "../../../global";
import goods from "@/api/game/goods";
import type from "@/api/game/type";
import attrGroup from "@/api/game/attrGroup";

export default {

  name: "goodsadd",
  components: { quillEditor },
  data() {
    return{
      goods: {
        imgList: [],
      },
      typeList: {},
      attrGroupList: {},
      fileList: [],
      dialogImageUrl: '',
      dialogVisible: false,
      BASE_API: global.baseApi,
      editorOption: {
        modules: {
          toolbar: [
            [
              "bold",
              "italic",
              "underline",
              "strike",
              "link",
              "image",
              "code-block",
            ], // toggled buttons
            [{ 'align': [] }],    //对齐方式
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],     //几级标题
            [{ 'font': [] }],     //字体
            [{ 'size': ['small', 'normal', 'large', 'huge'] }],
            [{ 'color': [] }, { 'background': [] }],     // 字体颜色，字体背景颜色
          ],
        },
      },
    }
  },

  activated() {
    //获取游戏类型
    this.getGameType()
    //获取属性分组信息
    this.getAttrGroup()
  },

  methods: {

    getGameType() {
      type.getGameTypeInfo()
      .then(result => {
        this.typeList = result.data
      })
    },

    getAttrGroup() {
      attrGroup.getAllAttrGroup()
        .then(result => {
          this.attrGroupList = result.data
        })
    },

    handleRemove(file, fileList) {
      this.fileList = fileList
    },

    //预览图片
    viewPicture(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    //上传成功之后
    uploadSuccess(response, file, fileList) {
      this.fileList = fileList
    },

    addGameNext() {

      if (this.fileList == undefined || this.fileList.length <= 0) {
        this.$message.error('请上传图片信息');
        return
      }

      //获取图片集
      this.goods.imgList = []
      for (let i = 0; i < this.fileList.length; i++) {
        const fileUrl = this.fileList[i].response.data[0];
        this.goods.imgList.push(fileUrl);
      }
      goods.addGameGoodsInfo(this.goods)
      .then(result => {
        this.goods = {}
        this.$router.push({path: 'game-gameattradd', query: {id: result.data}})
      })

    }
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
</style>
